PhineX Lab | الخطوة 5

PhineX / نظام البحث

5/8

الخطوة ٥

نظام البحث والفلترة

سنضيف حقل بحث يفلتر صفوف الجدول بشكل ديناميكي أثناء الكتابة.

المهام

١

في index.html، أضف فوق الجدول: <input id="gameSearch" placeholder="ابحث عن لعبة...">

٢

في style.css، أضف للـ #gameSearch: width: 100%; و padding: 10px;

٣

في script.js، أضف مستمع حدث keyup يخفي الصفوف غير المتطابقة بجعل display = 'none'

💡 كود البداية:

document.getElementById('gameSearch')

.addEventListener('keyup', function() {

  const val = this.value.toLowerCase();

  // الق نظرة على tr في #gamesTable

});

1

localhost / index.html

◀ السابق

التالي ▶